<!-- components/i-icon -->
<template>
	<view :class="[icon, type === 'single' ? 'iconfont font' : 'c-icon width']" :style="[style()]"></view>
</template>

<script setup lang="ts">
	import {
		computed
	} from 'vue'

	interface Props {
		icon : string
		type ?: string
		size ?: string
		color ?: string
	}
	const props = withDefaults(defineProps<Props>(), {
		icon: '',
		type: 'single',
		size: '32rpx',
		color: ''
	})
	const style = computed(() => () => {
		let fontSize = {
			'font-size': props.size,
			'line-height': props.size,
			'color': ''
		}
		// 如果传了color属性，就将其加到单色图标样式里面
		if (props.color) {
			fontSize.color = props.color
		}
		
		let width = {
			width: props.size,
			height: props.size
		}
		let result = props.type === 'single' ? fontSize : width
		return result
	})
</script>

<style lang="scss" scoped>
	
	.iconfont {
		display: inline-block;
	}

	// 单色图标通过font-size定义大小
	.font {
		font-size: 32rpx;
	}

	// 多色图标通过宽高定义大小
	.width {
		width: 52rpx;
		height: 52rpx;
	}
</style>